<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JS/jQuery.min.js"></script>
</head>

<body>
    <div class="container">
        <form action="" id="editForm">
            省份名字
            <input type="text" name="" id="province" placeholder="请输入省份名字">
            城市名字
            <input type="text" name="" id="city" placeholder="请输入城市名字">
        </form>
        <button type="button" id="btn">查询</button>

        <!-- 地区列表 -->
        <p>地区列表</p>
        <ul class="list_group">
            <!-- <li class="list_item">区</li> -->

        </ul>
    </div>

    <script>
        //   获取地区列表: http://hmajax.itheima.net/api/area
        //   查询参数:
        //     pname: 省份或直辖市名字
        //     cname: 城市名字
        $(function () {
            $('#btn').on('click', () => {
                let province = $('#province').val()
                let city = $('#city').val()
                $.ajax({
                    type:'get',
                    url: 'http://hmajax.itheima.net/api/area',
                    data: {
                        pname: province,
                        cname: city
                    },
                    success: res => {
                        // console.log(res);
                        // 获取地区 数组
                        let listt = res.list
                        console.log(listt);
                        // 循环遍历
                        $.each(listt, (i, item) => {
                            // 渲染到页面
                            $('.list_group').append(`<li class="list_item">${item}</li>`)
                        })
                    }
                })
            })
        })
    </script>

</body>

</html>